<template>
  <div>
    <template v-for="item in items">
      <el-submenu :index="item.index" :key="item.id" v-if="item.childs">
        <template slot="title">
          {{item.icon}}
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <DBMenuItem :items="item.childs"></DBMenuItem>
      </el-submenu>

      <el-menu-item
        style="border-width:10px"
        :index="item.index"
        :key="item.id"
        v-if="!item.childs"
      >
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "DBMenuItem",
  props: ["items"],
  data() {
    return {
      itemTpl: [
        {
          id: "1",
          index: "1",
          title: "测试1",
          icon: "",
          childs: [
            {
              id: "1-1",
              index: "",
              title: "孩子1",
              icon: ""
            }
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
</style>